<template>
  <div>
    <div class="putips">商事登记申请</div>
    <div class="cbg">
      <div class="uploadcontent">


        <div class="uptitle">身份证上传</div>

        <ul>
          <li>
            <div class="upimgfile">
              <div class="upImgs" v-if="!$store.state.personInfo.zmattid">
                <img src="./img/sfz_zm.png"/>
                <p>人像面照片</p>
              </div>
              <div class="upImgSuc" v-if="$store.state.personInfo.zmattid">
              <img :src="$store.state.baseImgUrl+$store.state.personInfo.zmattid"/>
              </div>
              <fileupload @uploadsucess="zmsuccess"></fileupload>
          </div>
          </li>
          <li>
            <div class="upimgfile" >
              <div class="upImgs" v-if="!$store.state.personInfo.fmattid">
                <img src="./img/sfz_fm.png"/>
                <p>国徽面照片</p>
              </div>
              <div class="upImgSuc" v-if="$store.state.personInfo.fmattid">
                <img :src="$store.state.baseImgUrl+$store.state.personInfo.fmattid"/>
              </div>
              <fileupload @uploadsucess="fmsuccess"></fileupload>
          </div>

          </li>

        </ul>
        <div class="updesc">

          <p>1.该资料仅用于办理相关登记</p>

          <p>2.拍照时请确保身份证边框完整、图像清晰、光线均匀</p>




        </div>
      </div>
    </div>



    <div class="cbg" style="background: none;">
      <div class="txxy">
        <!--<el-checkbox v-model="checked"></el-checkbox>-->

        <!--点击开始登记代表您已同意新商合规宝-->


        <!--<span style="color:#333">-->
                                <!--《服务协议》-->
                            <!--</span>-->
        <div class="libtn">
          <p></p>
          <button @click="nextsetp()" class="buttonOk">下一步</button>
        </div>
      </div>



    </div>

  </div>
</template>

<script>
  export default {
    name: "pcar1",
    data(){
      return{
        radio:'',
        checked:true
      }
    },
    created(){
      var x = localStorage.getItem('tempPer') || ''
      if(x){
        // this.$store.state.personInfo = JSON.parse(x)

        this.$store.commit('setPersonInfo',JSON.parse(x))
      }
    },
    methods:{
      nextsetp(){
        // if(!this.checked){
        //   this.$toast('请先同意协议')
        //   return false;
        // }
        if(!this.$store.state.personInfo.fmattid || !this.$store.state.personInfo.zmattid){
          this.$toast('请上传身份证正反面')
          return false;
        }
        this.$router.push({
          path:'/personCar',
          query:{
            funCode:'pcar4'
          }
        })
      },
      zmsuccess(obj){
        this.$http.post('yxc/wxuser/reg/startReg',{
          "psnAttachList":[
            {
              "attachmentId":obj.data,
              "fileType":"FRONT"
            }
          ]
        }).then(res=>{
          if(res.code== 200){
            this.$store.state.personInfo.zmattid = res.data.attachId
            this.$store.state.personInfo.name = res.data.realName

          }else{
              this.$toast(res.message)
          }

        })
      },
      fmsuccess(obj){
        this.$http.post('yxc/wxuser/reg/startReg',{
          "psnAttachList":[
            {
              "attachmentId":obj.data,
              "fileType":"BACK"
            }
          ]
        }).then(res=>{
          if(res.code== 200){
          this.$store.state.personInfo.fmattid = res.data.attachId
          }else{
            this.$toast(res.message)
          }

        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .uptitle{
    text-align: center;
    font-size:14px;
    padding:20px 0;
  }
  .putips{
    background:rgba(237,244,255,1);
    text-align: left;
    line-height: 35px;
    padding:0 20px;
    font-size:18px;
    color:rgba(51,51,51,1);
  }
  .libtn {
    border: none;
    text-align: center;
    .buttonOk {
      padding:10px 0;
      border-radius: 5px;
      border: none;
      background:rgba(28,103,255,1);
      color: #FFF;
      font-size: 35px;
      /*box-shadow: 0 10px 20px rgba(102, 177, 255, .3);*/
      width: 90%;
      font-size:18px;
      margin-bottom: 10px;
    }.buttonCancle {
       padding:10px 0;
       border-radius: 5px;

       border:1px solid rgba(191,191,191,1);
       background: #FFF;
       color: #666;
       font-size: 35px;
       /*box-shadow: 0 10px 20px rgba(102, 177, 255, .3);*/
       width: 90%;
       font-size:18px;
     }
  }
  .txxy{font-size:12px; color:#999;}
  .zftips{font-size:12px; color: #999; p{margin:0;padding:0;} padding:10px 0;}
  .lbox{
    padding:0 10px;
    li{border-bottom: 1px solid #eee;padding:15px 0; font-size: 14px;
      display: flex;
      .labelName{width:90px;}
      .labelCon{
        width:100%;
      }
    }
  }
  .el-radio{
    margin-right: 10px;
  }
  .setpcon{
    background:rgba(67,140,253,1);
    border-radius:10px;
    img{width:100%;}
    padding:15px 20px;
    margin-bottom: 20px;
  }

  .upImgs{
    img{height:150px; opacity: .8}
    text-align: center;
    p{
      text-align: center;
      margin:0;padding:0;font-size:14px;color:#999;
    }
    margin:5px;
  }
  .upImgSuc{
    margin:5px;
    overflow: hidden;
    img{height:170px; width:100%; }
  }
  .updesc{font-size:12px; color:#999; margin-top:15px;}

  .cbg{margin-bottom:10px;padding:10px; background: #FFF;}
  .uploadcontent{
    h3{
      font-size:18px;
      position: relative;
      margin:0;padding: 0;
      font-weight: 400;
      color:rgba(51,51,51,1);
      margin-bottom: 10px;
      .cdemo{font-size:14px; position: absolute; right:10px; top:5px; font-weight:normal; color:#1C67FF;}
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      padding:5px 0;
      li{
        width:100%;
        margin-bottom: 20px;
        .upimgfile{
          background:rgba(245,248,255,1);
          margin:0 5px;
          border-radius: 8px;
          padding:5px;
          position: relative;
        }
      }
    }

  }
</style>
